<template>
  <div class='my_swiper_box'>
    <van-swipe
      class="my-swipe"
      :autoplay="autoplay"
      indicator-color="white"
      @change="onChange"
    >
      <van-swipe-item
        v-for='(item,index) in list'
        :key='index'
      >
        <slot :item123='item'></slot>
      </van-swipe-item>

      <template #indicator>
        <slot name='indicator'></slot>
      </template>
    </van-swipe>
  </div>
</template>
<script>
// @ is an alias to /src
export default {
  name: "my-swiper",
  props: {
    list: {
      type: Array,
      default() {
        return [];
      },
      required: true,
    },
    autoplay: {
      type: Number,
      default: 3000,
    },
  },
  data() {
    return {
      current:0
    };
  },
  methods: {
    onChange(index) {
      this.$emit('change',index)
    },
  },
  components: {},
};
</script>
<style lang="less">
.my_swiper_box {
  height: 150px;
  // overflow: hidden;
}
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
  background-color: #39a9ed;
}
</style>